<template>
  <div class="pre-archive-detail">
    <el-dialog width="70%" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false" append-to-body>
      <span slot="title">
        <i class="iconfont icon-ziliao"></i>
        <span>{{ title }}</span>
      </span>

      <div class="WholeScroll" style="max-height: 650px; overflow: auto;padding: 0 15px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="项目信息" name="first"></el-tab-pane>
        </el-tabs>

        <el-form :model="formBaseData" ref="formBaseData" class="small-lineHeight-form" :rules="formBaseRules" style="position: relative" v-show="activeName == 'first'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="项目名称" required prop="projectName" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.projectName" placeholder="请输入项目名称" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="项目编号" prop="projectCode" :label-width="formlabelWidth">
                <el-input class="contract-ele" v-model="formBaseData.projectCode" placeholder="请输入项目编号" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交易方式" prop="tradeWay" :label-width="formlabelWidth">
                <el-select class="select" style="width: 100%" v-model="formBaseData.tradeWay" filterable placeholder="请选择" :disabled="detailType === 'check'">
                  <el-option v-for="(item, i) in selectList.tradeWay" :key="i" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="行业" prop="industry" :label-width="formlabelWidth">
                <el-select class="select" style="width: 100%" @change="$forceUpdate()" v-model="formBaseData.industry" multiple filterable placeholder="请选择" :disabled="detailType === 'check'">
                  <el-option v-for="(item, i) in selectList.industry" :key="i" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="建设单位" prop="constructUnit" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.constructUnit" placeholder="请输入建设单位" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="开标日期" prop="openDate" :label-width="formlabelWidth">
                <el-date-picker style="width: 95%" v-model="formBaseData.openDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :disabled="detailType === 'check'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="中标单位" prop="biddingUnit" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.biddingUnit" placeholder="请输入中标单位" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="标底价格（万元）" prop="biddingEndPrice" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.biddingEndPrice" placeholder="请输入标底价格" :disabled="detailType === 'check'" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中标价格（万元）" prop="biddingPrice" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.biddingPrice" placeholder="请输入中标价格" :disabled="detailType === 'check'" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="交易场地" prop="tradePlace" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.tradePlace" placeholder="请输入交易场地" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人" prop="leader" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.leader" placeholder="请输入负责人" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监督人" prop="supervisor" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.supervisor" placeholder="请输入监督人" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="履约保证金" prop="performancePrice" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" type="number" v-model="formBaseData.performancePrice" placeholder="请输入履约保证金" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24" style="position: relative">
              <el-form-item label="备注" prop="remark" :label-width="formlabelWidth">
                <el-input class="contract-ele-long" v-model="formBaseData.remark" placeholder rows="8" type="textarea" :disabled="detailType === 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="more">更多信息</div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="档案资料" :label-width="formlabelWidth">
                <cmsUploadFile ref="fileOne" :detail-id="detailId" :fileSystem="fileSystem['one']" :fileList="fileList" :disabled="detailType === 'check'|| detailType === 'audit'" type="mul" info="支持上传 png/jpg/gif/doc/xlsx/ppt/pdf 文件" :detail-type="detailType" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="中标通知书" prop="proimg" :label-width="formlabelWidth">
                <cmsUploadFile ref="fileTwo" :detail-id="detailId" :fileSystem="fileSystem['two']" :fileList="fileList" :disabled="detailType === 'check'|| detailType === 'audit'" type="mul" info="支持上传 png/jpg/gif/doc/xlsx/ppt/pdf 文件" :detail-type="detailType" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="其他附件" prop="proimg" :label-width="formlabelWidth">
                <cmsUploadFile ref="fileThree" :detail-id="detailId" :fileSystem="fileSystem['three']" :fileList="fileList" :disabled="detailType === 'check'|| detailType === 'audit'" type="mul" info="支持上传 png/jpg/gif/doc/xlsx/ppt/pdf 文件" :detail-type="detailType" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <!--api操作按钮 除去上报-->
        <!--新建和编辑的暂存上报-->
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <loading-button size="small" type="primary" @click="handleClickDeal('submit', { flag: 1 }, $event)">
            <span><i class="iconfont icon-icon_save"></i> 确 定</span>
          </loading-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cmsPopoverTree from '@/views/components/cmsPopoverTree.vue'
import crudDict from '@/api/system/dict'
import msgUtil from '@/utils/msgUtil'
import dept from '@/api/system/dept'
import crudSection from '@/api/buss/sectionInfo'
import LoadingButton from '@/components/LoadingButton';
const PREVIEW_URL = process.env.VUE_APP_FILE_PREVIEW
import { v4 as uuidv4 } from 'uuid';
import biddingManagement from "@/api/buss/biddingManagement";

// import canvasResize from 'canvas-resize'
export default {
  name: 'info-detail',
  components: {
    cmsPopoverTree,
    LoadingButton,
    // contractDetail: require('../../../contract/contract-payment/contract-payment-detail/contract-payment-detail')
    //   .default
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },
  watch: {
    postDetail(value) {
      this.initData();
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.detailId = value.detailId ? value.detailId : '';

      if (this.detailType == 'build') {
        this.$set(this, 'fileList', [])
        //
        this.title = '新增'
      } else if (this.detailType == 'check') {
        this.title = '查看项目详情'
      } else if (this.detailType == 'edit') {
        this.title = '编辑'
      } else {
        this.title = ''
      }
      this.chooseProjectTypeArr = []
      this.checkedLinkUsers = []
      if (this.detailType !== 'build') {
        // // 获取详情请求
        this.getDetail()
      }
    },
  },
  data() {
    return {
      videoUrl: '',
      chooseIndex: 0,
      leftBridge: [],
      cjUnitTable: [],
      mainProjectSizeTable: [],
      moneyStatusTable: [],
      mainTecTable: [],
      leftArr: [{
        name: '参建单位'
      }, {
        name: '主要工程量'
      }, {
        name: '费用情况（万元）'
      }, {
        name: '主要技术指标'
      }],
      chooseLeftIndex: 0,
      defaultIds: [],
      //
      companyMap: {
        build: {},
        cost: {},
        supervisor: {},
        agent: {},
      },
      detailBiaoId: '', //该值专门用于存放标段信息的id值
      total: '',
      tendersTotal: '',
      buildList: [],
      supervisorList: [],
      costList: [],
      agentList: [],
      //end
      cascaderProps: {
        multiple: true,
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
        emitPath: false,
      },
      uploadLoading: false,
      biaoInformation: '',
      uploadLoading2: false,
      uploadLoading3: false,
      linkUsers: {},
      ownerRepresentativeUsers: {},
      checkedLinkUsers: [],
      checkedownerRepresentativeUsers: [],
      linkUserOpts: [],
      ownerRepresentativeUserOpts: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      isPopContainer: false,
      isShowVideo: false,
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: '',
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: '',
      },
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      detailActions: [], // 当前详情的操作项
      formShow: false, // 表单展示
      formlabelWidth: '163px', // 表单左侧标题宽度
      formlabelWidth1: '30px', // 表单左侧标题宽度
      formlabelWidth2: '150px', // 表单左侧标题宽度
      title: '档案详情',
      activeName: 'first',
      isAudit: '',
      fileList: [],
      fileSystem: {
        'one': {
          sys: 'buss',
          module: 'info',
          part: 'one',
          compoName: 'fileOne'
        },
        'two': {
          sys: 'buss',
          module: 'info',
          part: 'two',
          compoName: 'fileTwo'
        },
        'three': {
          sys: 'buss',
          module: 'info',
          part: 'three',
          compoName: 'fileThree'
        },
      },
      selectList: {
        tradeWay: [],
        industry: [],
        file: [],
      }, // 所有下拉框列表的集合
      formBaseData: {
        id: '',
        projectName: '',
        projectCode: '',
        tradeWay: '',
        industry: '',
        constructUnit: '',
        openDate: '',
        startTime: '',
        biddingUnit: '',

        biddingEndPrice: '',
        biddingPrice: '',
        tradePlace: '',
        leader: '',
        supervisor: '',
        performancePrice: '',
        remark: ''
      }, // 表单基本信息内容

      formBaseDataBiao: {
        code: '',
        coveredArea: '',
        projectSite: '',
        structureType: '',
        startTime: '',
        endTime: '',
        buildUnitUsers: [],
        supervisorUnitUsers: [],
        costUnitUsers: [],
        agentConstructionUsers: [],
        properties: '',
        intro: '',
        //新增兩個
        buildUnit: '',
        supervisorUnit: '',
        //end
        // manufacturingCost:'',
        sectionLength: '',
      },

      formBaseRules: {
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur',
          },
        ],
      }, // 表单基本信息验证
      /**
       * 审批配置数据
       * */
      auditConfigData: {
        //  实体基本数据
        baseData: {},
        //  基本请求地址
        urlBase: '',
        //  是否显示
        show: false,
        //  提交数据成功时候的回调函数
        submitCallBack: null,
        //  选择了动作时的回调函数
        selActionCallBack: null,
      },
      contractDetail_postDetailData: {
        show: false,
        type: 'check',
      },
      fileFormTitle: '',
      fileListShow_file: [
        {
          name: '12312',
        },
      ],
      sectionTable: [],
      secondTable: [],
      secondTableSearch: {
        pageIndex: 0,
        pageSize: 10,
        pageSum: 0,
      },
      search: {
        pageIndex: 0,
        pageSize: 10,
        pageSum: 0,
      },
    }
  },
  mounted() {
    // this.getLinkUserOptss()
    // this.getProperties()
    // this.cjUnitTable:[],
    //   mainProjectSizeTable:[],
    //   moneyStatusTable:[],
    //   mainTecTable:[],
  },
  methods: {
    newUpNumber() {
      var obj = event.target;
      var t = obj.value.charAt(0);
      obj.value = obj.value.replace(".", "$#$")//把第一个字符'.'替换成'$#$'
        .replace(/\./g, "")//把其余的字符'.'替换为空
        .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, "")//只能输入数字和'.'
        .replace(/^\./g, "")//不能以'.'开头
      if (t == '-') {
        obj.value = '-' + obj.value;
      }
    },
    uploadFunction(item, row) {
      console.log(this.$refs.uploadFunctionRef)
      this.$refs.uploadFunctionRef.submit()
    },
    changeMeasureType(val) {
      if (val == '1') {
        this.formBaseData.isBuildSharesOneList = ''
      }
    },
    addMeasureBatch() {
      let arr = {
        leftName: '新增项目',
        type: '0',
        name: '',
        content: '',
        fileObj: {
          fileList: []
        }
      }
      this.leftBridge.push(arr)
    },
    uuid() {
      return uuidv4().split('-')[0]
    },
    uploadFile(file, row) {
      console.log(file, row)
      //配置一下上传的参数
      this.$publicUpload.uploadFile(
        file,
        this.uuid(),
        'biddingmanagement',
        'file1',
        file.name,
      ).then(res => {
        //成功的回调，往row里面塞fileName
        if (!row.fileList) {
          row.fileList = []
        }
        let arr = JSON.parse(JSON.stringify(row.fileList))
        arr = [{
          name: file.name,
          size: file.size,
          id: res.data[0],
          isLoading: false,
        }]
        this.$set(row, 'fileList', arr)
        this.$forceUpdate()
        console.log(row.fileList, 'row.fileListrow.fileListrow.fileListrow.fileList')
      }).catch(res => {

      })
    },
    removeFile(file, fileList) {
      this.$confirm('确定是否删除？', '提示', {
        confirmButtonClass: 'iconfont icon-icon_ok',
        cancelButtonClass: 'iconfont icon-icon_cancel',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          fileList.forEach((item, index) => {
            if (file.id === item.id) {
              fileList.splice(index, 1)
            }
          })
          this.$publicUpload.removeFile(file.id)
        })
        .catch(() => {
        })
    },
    deleteLeftBridge(index) {
      this.$confirm('确定是否删除？', '提示', {
        confirmButtonClass: 'iconfont icon-icon_ok',
        cancelButtonClass: 'iconfont icon-icon_cancel',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          if (this.leftBridge.length == 1) {
            this.$set(this, 'leftBridge', [])
          } else {
            this.leftBridge.splice(index, 1)
            let arr = JSON.parse(JSON.stringify(this.leftBridge))
            this.$set(this, 'leftBridge', arr)
            this.chooseIndex = 0
          }

        })
        .catch(() => {
        })
    },
    changeLeftName(item) {
      item.leftName = item.name
    },

    initData() {
      this.selectList.tradeWay = []
      this.selectList.industry = []
      crudDict.getByCode('trade_way').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.selectList.tradeWay.push({ 'value': data[i].id, 'label': data[i].name });
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取交易方式失败")
      })

      crudDict.getByCode('industry').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.selectList.industry.push({ 'value': data[i].id, 'label': data[i].name });
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取行业字典失败")
      })
    },


    manageFormChange() {
      this.$forceUpdate()
    },

    getDetail() {

      biddingManagement.getOne(this.detailId).then(res => {
        if (res.code === 200) {
          // let formBaseData = this.formBaseData;
          this.formBaseData = res.data
          this.formBaseData.id = res.data.id
          this.formBaseData.industry = res.data.industry.split(",")
          this.loadFiles()
        } else {
          msgUtil.error2(res.msg)
        }
      }).catch(() => {
        msgUtil.error2("获取详情信息失败")
      })
    },

    //切换分页
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },


    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      let param = this.formBaseData
      param.industry = this.formBaseData.industry.toString()
      console.log("提交参数，" + JSON.stringify(param))
      if (this.detailType === 'build') {
        biddingManagement.submit(param).then(res => {
          if (res.code === 200) {
            this.detailId = res.data.id
            this.saveFiles()
            // 传值给父组件刷新列表
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500
            })
            this.$emit('reloadList')
            this.formShow = false
          } else {
            msgUtil.error2(res.msg)
          }
        }).catch((response) => {
          this.$notify({
            title: '数据新增失败',
            type: 'error',
            duration: 2500
          })
        }).finally((response) => {
          callback && callback();
          // this.isLoading = false
        })
      } else {
        biddingManagement.resubmit(param).then(res => {
          if (res.code === 200) {
            if (type == 'needResubmit') {
              return
            }
            this.detailId = res.data.id
            this.saveFiles()
            // 传值给父组件刷新列表
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 1500
            })
            this.$emit('reloadList')
            this.formShow = false
          } else {
            msgUtil.error2(res.msg)
          }
        }).catch((response) => {
          this.$notify({
            title: '数据新增失败',
            type: 'error',
            duration: 2500
          })
        }).finally((response) => {
          callback && callback();
          // this.isLoading = false
        })
      }
    },

    // 事件处理的api请求
    sealDealHttp(url, query, params, callback) {
      this.$httpPost(this.$store.state.httpHost.buss + url + query, params)
        .then((res) => {
          if (res.data.status === 1) {
            if (callback) callback(res.data)
          } else {
            this.$messageError(res.data.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          console.log(res)
        })
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res, callback) {
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          if (this.activeName == 'first') {
            if (this.$refs['formBaseData'] !== undefined) {
              this.$refs['formBaseData'].resetFields()
            }
          }
          this.cjUnitTable = []
          this.mainProjectSizeTable = []
          this.moneyStatusTable = []
          this.mainTecTable = []
          this.chooseLeftIndex = 0
          // 清空表单内容
          this.formBaseData = {
            id: '',
            projectName: '',
            projectCode: '',
            tradeWay: '',
            industry: '',
            constructUnit: '',
            openDate: '',
            startTime: '',
            biddingUnit: '',

            biddingEndPrice: '',
            biddingPrice: '',
            tradePlace: '',
            leader: '',
            supervisor: '',
            performancePrice: '',
            remark: ''
          } // 表单基本信息内容
          this.chooseIndex = 0
          this.leftBridge = []
          this.fileList = []
          for (let k in this.fileSystem) {
            let fileProp = this.fileSystem[k]
            this.$refs[fileProp.compoName].cancelAll()
          }
          // 关闭弹窗
          this.formShow = false
          //
          this.tenders = false
          this.tendersFen = false
          this.selectList.tradeWay = []
          this.selectList.industry = []
          //this.detailId=''
          //关闭窗口显示待确定
          //end
          // document.getElementsByName('radios')[0].checked = 'checked'
          //使其变量置为空值。以免变量生命周期的影响。。。
          //end
          break
        // 保存
        case 'submit':
          // 表单验证
          this.$nextTick(() => {
            this.$refs['formBaseData'].validate((valid) => {
              if (valid) {
                let flag = res.flag
                // 再验证其他内容
                // 整理文件信息
                // this.isLoading = true
                // 提交详情
                this.submitDetail(flag, () => {
                  callback && callback();
                })
              } else {
                callback && callback();
                // this.isLoading = false
              }
            })
          })

          break
        // 删除
      }
    },
    saveFiles() {
      for (let k in this.fileSystem) {
        let fileProp = this.fileSystem[k]
        this.$refs[fileProp.compoName].saveAll(this.detailId)
      }
    },

    loadFiles() {
      this.$nextTick(() => {
        for (let k in this.fileSystem) {
          let fileProp = this.fileSystem[k]
          console.log("fileProp=", fileProp.compoName)
          this.$refs[fileProp.compoName].init()
        }
      })
    },


    handleClick(tab, event) {
      console.log(tab, event)
    },

  },
}
</script>

<style scoped lang="scss">
$borderColor: #c0c4cc;

.popContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.video-remove {
  position: absolute;
  top: 40%;
  z-index: 999;
  cursor: pointer;
}

.contract-ele {
  //   width: 280px;
  width: 95%;
}

.contract-ele-long {
  //   width: 280px;
  width: 98%;
}

.formTitle {
  font-weight: bold;
  font-size: 16px;
}

.hoverTxt {
  color: #008fe0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-demo-fujian {
  width: 250px;
}

.upload-demo-zongtu {
  width: 300px;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left-choose-div {
  border: 1px solid #e3e3e3;
  width: 14%;
  min-width: 150px;
  padding: 0 15px 0 15px;
}
.blueText {
  color: #0baaf6;
}
.left-p {
  cursor: pointer;
}
.right-table {
  flex-grow: 1;
}
.flex-row-info {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.info-detail-box {
  border: 1px $borderColor solid;
  display: flex;
  flex-direction: row;
  margin: 30px 0;
  .left-box {
    min-width: 200px;
    padding: 0 0 15px 0;
    padding-bottom: 50px;
    border-right: 1px $borderColor solid;
    position: relative;
    .left-content-box {
      padding: 15px;
      max-height: 350px;
      overflow-y: auto;
    }
    p {
      cursor: pointer;
    }
  }
  .right-box {
    flex-grow: 1;
    padding: 15px;
    padding-bottom: 30px;
  }
  .chooseText {
    color: #008fe0;
  }
}
.flex-row-bridge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  p {
    margin: 5px 0;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  i {
    cursor: pointer;
  }
  i:hover {
    color: #a71c1c;
  }
}
.left-bottom-group {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 10px;
  left: 0;
  .el-button {
  }
  .deleteBatch {
    background-color: rgba(215, 215, 215, 0);
    border-color: #409eff;
    color: #409eff;
  }
}
.fileText {
  cursor: pointer;
  margin: 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
  img {
    height: 20px;
    margin-right: 15px;
  }
  span {
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    margin-right: 15px;
  }
}
.fileText:hover {
  background-color: rgb(245, 247, 250);
}
.flex-hv-center {
  min-height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-text-style {
  i {
    font-size: 12px;
  }
}
.more {
  font-size: 28px;
  color: black;
  margin: 20px 0;
}
</style>
<style lang="scss">
.form-center {
  display: flex;
  align-items: center;
  .el-form-item__content {
    display: flex;
    align-items: center;
    margin-left: unset !important;
  }
}
</style>
